<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="f"%>
<%@ taglib uri="/WEB-INF/tld/tag.tld" prefix="my"%>
<!DOCTYPE html>
<html>
<head>
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport"
	content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
<!--[if lt IE 9]>
<script type="text/javascript" src="/three/static/lib/html5shiv.js"></script>
<script type="text/javascript" src="/three/static/lib/respond.min.js"></script>
<![endif]-->
<link rel="stylesheet" type="text/css"
	href="/three/static/h-ui/css/H-ui.min.css" />
<link rel="stylesheet" type="text/css"
	href="/three/static/h-ui.admin/css/H-ui.admin.css" />
<link rel="stylesheet" type="text/css"
	href="/three/lib/Hui-iconfont/1.0.8/iconfont.css" />
<link rel="stylesheet" type="text/css"
	href="/three/static/h-ui.admin/skin/default/skin.css" id="skin" />
<link rel="stylesheet" type="text/css"
	href="/three/static/h-ui.admin/css/style.css" />
<!--[if IE 6]>
<script type="text/javascript" src="/three/src/main/webapp/static/lib/DD_belatedPNG_0.0.8a-min.js" ></script>
<script>DD_belatedPNG.fix('*');</script>
<![endif]-->
<title>礼包列表</title>
</head>
<body>
	<div class="page-container">
		<!-------------------------------综合查询开始---------------------------------------------------------------------------->
		<form action="/three/fbnb/front_bag" method="post" id="form1">
			<div class="text-c">
				<input type="text" name="bagId" placeholder="请输入礼包编号"
					style="width: 250px" class="input-text">&nbsp;&nbsp;&nbsp;&nbsp;
				<input type="text" name="bagName" placeholder="请输入礼包名称"
					style="width: 250px" class="input-text">&nbsp;&nbsp;&nbsp;&nbsp;
				<input type="text" name="bagTotalPrice1" placeholder="请输入最低价"
					style="width: 250px" class="input-text">至 <input
					type="text" name="bagTotalPrice2" placeholder="请输入最高价"
					style="width: 250px" class="input-text">&nbsp;&nbsp;
				<button class="btn btn-success" type="submit">
					<i class="Hui-iconfont">&#xe665;</i> 查询
				</button>
			</div>
			<!--------------------------综合查询结束---------------------------------------------------------------------------->

			<!-----------------------------------显示所有开始------------------------------------------------->
			<div class="mt-20">
				<table
					class="table table-border table-bordered table-bg table-hover table-sort table-responsive">
					<thead>
						<tr class="text-c">
							<th>礼包宣传图片</th>
							<th>礼包编号</th>
							<th>礼包名称</th>
							<th>建立时间</th>
							<th>礼包价格(元)</th>
							<th>礼包内容</th>
							<th>上架时间</th>
							<th>有效期(天)</th>
							<th>操作</th>
						</tr>
					</thead>
					<tbody>
						<c:forEach items="${bisNurseBag }" var="bag">
							<tr class="text-c">
								<td><img
									src="http://localhost:8080/three${bag.coverPhoto }" width="30px" height="30px" /></td>
								<td>${bag.bagId }</td>
								<td>${bag.bagName }</td>
								<td><f:formatDate value="${bag.createTime }"
										pattern="yyyy-MM-dd" /></td>
								<td>${bag.bagTotalPrice }</td>
								<td>${bag.projectName }</td>
								<td><f:formatDate value="${bag.putawayTime }"
										pattern="yyyy-MM-dd" />至 <f:formatDate
										value="${bag.soldoutTime }" pattern="yyyy-MM-dd" /></td>
								<td>${bag.overdueTime }</td>

								<td class="f-14 td-manage"><a style="text-decoration: none"
									class="ml-5"
									onClick="front_bag_details('${bag.bagId }','${bag.projectName }')"
									href="javascript:;" title="查看详情"><i class="Hui-iconfont">&#xe665;</i></a>
								</td>
							</tr>
						</c:forEach>
					</tbody>
				</table>
			</div>
		</form>
		<!-----------------------------显示所有结束------------------------------------------------------->


		<!------ ----------------------模态框开始---------------------------------------------------- -->
		<div id="modal-demo" class="modal fade" tabindex="-1" role="dialog"
			aria-labelledby="myModalLabel" aria-hidden="true">
			<div class="modal-dialog">
				<div class="modal-content radius" id="radius">
					<div class="modal-header">
						<h3 class="modal-title">查看礼包信息</h3>
						<a class="close" data-dismiss="modal" aria-hidden="true"
							href="javascript:void();">×</a>
					</div>
					<div class="modal-body">
						<!------ ----------------------模态框内容部分开始---------------------------------------------------- -->
						<table
							class="table table-border table-bordered table-bg table-hover table-responsive">
							<tr class="text-c">
								<td>礼包宣传图片：</td>
								<td>
									<img id="coverPhoto" style="width: 100px;height: 100px"/>
								</td>
							</tr>
							<tr class="text-c">
								<td>礼包名称：</td>
								<td id="bagName"></td>
							</tr>
							<tr class="text-c">
								<td>礼包价格：</td>
								<td id="bagTotalPrice"></td>
							</tr>
							<tr class="text-c">
								<td>礼包包含：</td>
								<td id="projectNames"></td>
							</tr>
							<tr class="text-c">
								<td>上架时间：</td>
								<td id="putawayTime"></td>
							</tr>
							<tr class="text-c">
								<td>建立时间：</td>
								<td id="createTime"></td>
							</tr>
							<tr class="text-c">
								<td>有效期：</td>
								<td id="overdueTime"></td>
							</tr>
							<tr class="text-c">
								<td>购买说明：</td>
								<td id="bagIntroduce"></td>
							</tr>
						</table>
						<!------ ----------------------模态框内容部分结束---------------------------------------------------- -->
					</div>
					<div class="modal-footer">
						<button class="btn btn-default radius" data-dismiss="modal"
							aria-hidden="true" id="guanbi">关闭</button>
					</div>
				</div>
			</div>
		</div>
		<!-- 模态框结束--------------------------------------------------- -->

	</div>

	<script type="text/javascript"
		src="/three/lib/jquery/1.9.1/jquery.min.js"></script>
	<script type="text/javascript" src="/three/lib/layer/2.4/layer.js"></script>
	<script type="text/javascript" src="/three/static/h-ui/js/H-ui.min.js"></script>
	<script type="text/javascript"
		src="/three/static/h-ui.admin/js/H-ui.admin.js"></script>
	<!--/_footer 作为公共模版分离出去-->

	<!--请在下方写此页面业务相关的脚本-->
	<script type="text/javascript"
		src="/three/lib/My97DatePicker/4.8/WdatePicker.js"></script>
	<script type="text/javascript"
		src="/three/lib/datatables/1.10.0/jquery.dataTables.min.js"></script>
	<script type="text/javascript" src="/three/lib/laypage/1.2/laypage.js"></script>
	<script type="text/javascript">
		/*礼包-排序*/
		$('.table-sort').dataTable({
			"aaSorting" : [ [ 1, "desc" ] ],//默认第几个排序
			"bStateSave" : true,//状态保存
			"pading" : false,
			"aoColumnDefs" : [
			//{"bVisible": false, "aTargets": [ 3 ]} //控制列的隐藏显示
			{
				"orderable" : false,
				"aTargets" : [ 0, 8 ]
			} // 不参与排序的列
			]
		});

		/*礼包-详情*/
		function front_bag_details(bagId,projectName) {
			$("#modal-demo").modal("show");
			console.log(bagId);
			$.ajax({
				type : "POST",
				url : "/three/fbnb/front_bag_details?bagId="+bagId,
				success : function(msg) {
					var createTime = new Date(msg.createTime).Format("yyyy-MM-dd");
					var putawayTime = new Date(msg.putawayTime).Format("yyyy-MM-dd");
					var soldoutTime = new Date(msg.soldoutTime).Format("yyyy-MM-dd");
					console.log(msg);
					$("#coverPhoto").attr("src","http://localhost:8080/three"+msg.coverPhoto);
					$("#bagName").html(msg.bagName);
					$("#bagTotalPrice").html(msg.bagTotalPrice+"元");
					//包含
					$("#projectNames").html(projectName);
					$("#putawayTime").html(putawayTime+"至"+soldoutTime);
					$("#createTime").html(createTime);
					$("#overdueTime").html(msg.overdueTime);
					$("#bagIntroduce").html(msg.bagIntroduce);
				}
			});
		}
		
		/*礼包-日期格式化*/
		Date.prototype.Format = function(fmt) { //author: meizz 
			var o = {
				"M+" : this.getMonth() + 1, //月份 
				"d+" : this.getDate(), //日 
				"h+" : this.getHours(), //小时 
				"m+" : this.getMinutes(), //分 
				"s+" : this.getSeconds(), //秒 
				"q+" : Math.floor((this.getMonth() + 3) / 3), //季度 
				"S" : this.getMilliseconds()
			//毫秒 
			};
			if (/(y+)/.test(fmt))
				fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "")
						.substr(4 - RegExp.$1.length));
			for ( var k in o)
				if (new RegExp("(" + k + ")").test(fmt))
					fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k])
							: (("00" + o[k]).substr(("" + o[k]).length)));
			return fmt;
		};
	</script>
</body>
</html>